<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图像位置background-origin 属性</title>
  <style>
    #example1 {
      border: 10px solid black;
      padding: 35px;
      background: url(../gd.jpg);
      background-repeat: no-repeat;
      background-size: 50px;
    }

    #example2 {
      border: 10px solid black;
      padding: 35px;
      background: url(../gd.jpg);
      background-repeat: no-repeat;
      background-origin: border-box;/*边框位置*/
      background-size: 50px;
    }

    #example3 {
      border: 10px solid black;
      padding: 35px;
      background: url(../gd.jpg);
      background-repeat: no-repeat;
      background-origin: content-box;/*内容位置*/
      background-size: 50px;
    }
  </style>
</head>
<body>
<p>未设置 background-origin (padding-box 为默认):</p>
<div id="example1">
  <h2>Welcome to Shanghai</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>

<p>background-origin: border-box:</p>
<div id="example2">
  <h2>Welcome to Shanghai</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>

<p>background-origin: content-box:</p>
<div id="example3">
  <h2>Welcome to Shanghai</h2>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>
</body>
</html>